<template>
  <view class="platform_coupons">
    <public-loading></public-loading>
    <z-paging ref="paging" v-model="dataList" @query="queryList" >
      <template #top>
        <z-nav-bar id="nav" bgColor="#ffffff" title="平台红包"></z-nav-bar>
      </template>
      <view class="coupon-wrap mgt-24">
        <view class="coupon-item" v-for="item in dataList" :key="item.id">
          <view class="tips">
            {{item.couponType==='COUPON'?'折扣券':'代金券'}}
          </view>
          <view class="flex-a-center">
            <view class="num">
<!--              这个地方存在折扣-->
              <template v-if="item.discountAmount">
                ￥<text>{{ item.discountAmount }}</text>
              </template>
              <template v-else>
                <text>{{ item.discountRate }}</text>折
              </template>

            </view>
            <view class="desc-box">
              <view class="desc">
                订单满{{ item.minOrderAmount }}元可使用
              </view>
              <text>{{ item.startDate }}-{{ item.endDate }}</text>
            </view>
            <view class="ment" @click="handleGetCoupon(item)">
<!--              receiveCount-->
              <text class="red" v-if="!item.isReceived && item.available">领取</text>
              <text class="gray" v-if="item.isReceived">已领取</text>
<!--              <text class="red" v-if="item.userStatus === 0">领取</text>-->
<!--              <text class="gray" v-if="item.userStatus === 1">已领取</text>-->
<!--              <text class="gray" v-if="item.status === 3">已失效</text>-->
<!--              <text class="gray" v-if="item.status === 0">未达门槛</text>-->
            </view>
          </view>
        </view>
      </view>

    </z-paging>

  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import {qryIndexList} from '@/api/home'
import {
  couponListByStoreId,
} from '@/api/pagesShop'
import {couponAdd} from '@/api/pagesShop'
import {useCustomStores} from '@/utils/hook'
const {userStore:{userInfo}} = useCustomStores()
const dataList = ref([])
const paging = ref(null)
const queryList = (pageNo, pageSize) => {
  couponListByStoreId({
    pageNum: pageNo,
    pageSize: pageSize,
    storeId: '000000'
  }).then(res => {
    // 展开处理每个优惠券
    const expandedList = [];
    res.forEach(item => {
      const receiveCount = item.receiveCount || 0;
      // 复制成多张独立的券
      for (let i = 0; i < item.perUserLimit; i++) {
        expandedList.push({
          ...item,
          uniqueId: `${item.id}_${i}`, // 添加唯一标识
          isReceived: i < receiveCount, // 是否已领取
          available: !item.receiveCount || receiveCount < item.perUserLimit, // 只要没达到上限就可领取
        });
      }
    });
    paging.value.complete(expandedList);
  })
}
const handleGetCoupon = (item) => {
  if (!item.available) {
    uni.showToast({
      title: item.isReceived ? '该券已领取' : '该券不可领取',
      icon: 'none'
    });
    return;
  }

  couponAdd({
    couponId: item.couponId,
    userId: userInfo.userId,
    status: 0
  }).then(res => {
    uni.showToast({
      title: '领取成功',
      icon: 'none',
      duration: 2000
    });

    // 找到所有相同 couponId 的优惠券
    const receiveCount = (item.receiveCount || 0) + 1;
    dataList.value.forEach(coupon => {
      if (coupon.couponId === item.couponId) {
        coupon.receiveCount = receiveCount;
        coupon.isReceived = coupon.uniqueId.split('_')[1] < receiveCount;
        coupon.available = !coupon.isReceived && receiveCount < item.perUserLimit;
      }
    });
  })
}
function getDistance(lat1, lng1, lat2, lng2) {
  const R = 6371000; // 地球平均半径，单位：米
  const φ1 = lat1 * Math.PI / 180;
  const φ2 = lat2 * Math.PI / 180;
  const Δφ = (lat2 - lat1) * Math.PI / 180;
  const Δλ = (lng2 - lng1) * Math.PI / 180;

  const a = Math.sin(Δφ/2) * Math.sin(Δφ/2) +
    Math.cos(φ1) * Math.cos(φ2) *
    Math.sin(Δλ/2) * Math.sin(Δλ/2);

  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

  return R * c/1000; // 返回两点间的距离，单位：米
}
</script>

<style lang="scss">
.coupon-wrap{
  width: 100%;
  padding: 0 32rpx;
  .coupon-item{
    width: 100%;
    height: 163rpx;
    border-radius: 16rpx;
    background-color: #FFF9F2;
    background-image: linear-gradient(90deg, #FFF9F2 0%, #FFF4EF 100%);
    margin-bottom: 24rpx;
    padding: 20rpx 0;
    position: relative;
    .tips{
      width: 134rpx;
      height: 38rpx;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 16rpx 0 20rpx 0;
      background-color: #FBE3E1;
      font-size: 22rpx;
      color: #D22C14;
      padding: 4rpx 12rpx;
      text-align: center;
    }
    .num{
      font-size: 28rpx;
      font-weight: bold;
      color: #D22C14;
      margin-left: 32rpx;
      min-width: 112rpx;
      margin-right: 48rpx;
      text{
        font-size: 60rpx;
      }
    }
    .desc-box{
      font-size: 28rpx;
      color: #000;
      width: 353rpx;
      height: 122rpx;
      border-right: 1rpx dashed #8F8F8F;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      text{
        display: block;
        font-size: 24rpx;
        color: #999;
        margin-top: 4rpx;
      }
    }
    .ment{
      width: 176rpx;
      text-align: center;
      .gray {
        color: #8F8F8F;
      }
      .red {
        color: #D22C14;
      }
    }
  }
}

</style>
